<template>
  <div class="content">
    <el-row :gutter="20" type="flex" justify="space-around" style="width:100%;min-heigh:373px;margin-left:10px;">
      <el-col :span="7" style="height:373px;">
        <head-tab :title="'全省碳排放一览'">
          <img src="@/assets/index/u583.png" alt="" class="hValue cursorName" @click="goToDataset">
        </head-tab>

        <head-tab :title="'平台情况'">
          <div v-for=" (item) in levelFun" :key="item.id" class="level-item">
            <p class="level-title">{{ item.title }}</p>
            <p class="level-total">{{ item.totle }} 家</p>
          </div>
        </head-tab>
      </el-col>
      <el-col :span="5">
        <head-tab :title="'全省碳排、中和比'">
          <ringChart v-if="ringData && ringData.length>0" :ring-data="ringData" />
        </head-tab>
        <head-tab :title="'全省碳中和、需求情况'" class="tranBox">
          <transverse v-if="tranData && tranData.length>0" :tran-data="tranData" />
          <p class="tranBox-p1">全省碳中和总量{{ tranData && tranData.length>0?tranData[0].value:'' }}万吨</p>
          <p class="tranBox-p2">全省碳需求总量{{ tranData && tranData.length>1?tranData[1].value:'' }}万吨</p>
        </head-tab>
      </el-col>
      <el-col :span="11" style="height:756px;">
        <head-tab :title="'企业供需信息'" :height="756">
          <div class="timer-box">
            <div class="timer-head">
              <div class="" style="width:40%">企业名称</div>
              <div class=" " style="width:20%">供应碳量</div>
              <div class="" style="width:20%">价格</div>
              <div class="" style="width:20%">日期</div>
            </div>
            <div class="tc">
              <div id="pannel1" class="timer-content">
                <div v-for="(item,index) in tableData1" :key="index" class="timer-item">
                  <div class="info" style="width:40%">
                    {{ item.name }}
                  </div>
                  <div class="info" style="width:20%">
                    {{ item.value }}
                  </div>
                  <div class="info" style="width:20%">
                    {{ item.price }}
                  </div>
                  <div class="info" style="width:20%">
                    {{ item.date }}
                  </div>
                </div>
              </div>
            </div>

          </div>

          <div class="timer-box">
            <div class="timer-head tb">
              <div class="" style="width:40%">企业名称</div>
              <div class=" " style="width:20%">供应碳量</div>
              <div class="" style="width:20%">价格</div>
              <div class="" style="width:20%">日期</div>
            </div>
            <div class="tc">
              <div id="pannel2" class="timer-content">
                <div v-for="(item,index) in tableData1" :key="index" class="timer-item">
                  <div class="info" style="width:40%">
                    {{ item.name }}
                  </div>
                  <div class="info" style="width:20%">
                    {{ item.value }}
                  </div>
                  <div class="info" style="width:20%">
                    {{ item.price }}
                  </div>
                  <div class="info" style="width:20%">
                    {{ item.date }}
                  </div>
                </div>
              </div>
            </div>

          </div>

          <!-- <table ref='table' width="100%" class="table-d" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="40%">企业名称</th>
<th width="20%">供应碳量</th>
<th width="20%">价格</th>
<th width="20%">日期</th>
</tr>
</thead>
<tbody  ref="tBody">
<tr class="emptClass">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr v-for="(item,index) in tableData1" :key="index">
<td>{{item.name}}</td>
<td>{{item.value}}</td>
<td>{{item.price}}</td>
<td>{{item.date}}</td>
</tr>
</tbody>

</table> -->

          <!-- <table width="100%" class="table-c" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <th width="40%">企业名称</th>
              <th width="20%">供应碳量</th>
               <th width="20%">价格</th>
                <th width="20%">日期</th>
            </tr>
            <tr class="emptClass">
              <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr v-for="(item,index) in tableData1" :key="index" :class="index === 0?'tr-content':''">
              <td>{{item.name}}</td>
               <td>{{item.value}}</td>
                 <td>{{item.price}}</td>
                   <td>{{item.date}}</td>
            </tr>
          </table> -->

        </head-tab>
      </el-col>
    </el-row>

    <el-row :gutter="20" type="flex" justify="space-around" style="width:100%;min-heigh:373px;margin-left:10px;">
      <el-col :span="6" style="height:373px;">
        <head-tab :title="'公示'" :more="true" @moreTip="moreTip">

          <div v-for=" (item,index) in notice" :key="'tag'+index" class="notice-item">
            {{ item }}
          </div>
        </head-tab>
      </el-col>
      <el-col :span="5">
        <head-tab :title="'文件通知'" :more="true" @moreTip="moreTip">
          <div v-for=" (item,index) in promulgate" :key="'promulgate'+index" class="promulgate-item">
            {{ item }}
          </div>
        </head-tab>
      </el-col>
      <el-col :span="13">
        <head-tab :title="'诚信信息'" :more="true" @moreTip="moreTip">
          <el-row>
            <el-col :span="4" style="height:100%">
              <div class="cx-title">地方处罚</div>
              <div class="cx-title">企业诚信</div>
              <div class="cx-title">失信联合惩戒</div>
            </el-col>
            <el-col :span="10">
              <div class="cx-content">甘肃省对于XXXX的处罚决定</div>
              <div class="cx-content">四川省对于XXXX的处罚决定</div>
              <div class="cx-content">四川省对于XXXX的处罚决定</div>
              <div class="cx-content">四川省对于XXXX的处罚决定</div>
              <div class="cx-content">四川省对于XXXX的处罚决定</div>
            </el-col>
            <el-col :span="10">
              <div class="cx-content">甘肃省对于XXXX的处罚决定</div>
              <div class="cx-content">四川省对于XXXX的处罚决定</div>
              <div class="cx-content">四川省对于XXXX的处罚决定</div>
              <div class="cx-content">四川省对于XXXX的处罚决定</div>
              <div class="cx-content">四川省对于XXXX的处罚决定</div>
            </el-col>
          </el-row>
        </head-tab>
      </el-col>
    </el-row>

    <el-row :gutter="20" type="flex" justify="space-around" style="width:100%;min-heigh:403px;margin-left:10px;">
      <el-col>
        <head-tab :title="'碳“净零排放”示范基地、园区、企业'" :height="'403'">

          <el-row>
            <el-col :span="12">
              <div class="discharge-item">
                <p class="discharge-name">1. 四川华东电气集团有限公司  </p>
                <p class="discharge-total">碳排放中和系数比：60%</p>
              </div>
              <div class="discharge-item">
                <p class="discharge-name">2. 四川华东电气集团有限公司  </p>
                <p class="discharge-total">碳排放中和系数比：60%</p>
              </div>
              <div class="discharge-item">
                <p class="discharge-name">3. 四川华东电气集团有限公司  </p>
                <p class="discharge-total">碳排放中和系数比：60%</p>
              </div>
              <div class="discharge-item">
                <p class="discharge-name"> 4.四川华东电气集团有限公司  </p>
                <p class="discharge-total">碳排放中和系数比：60%</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="discharge-item">
                <p class="discharge-name">5.四川华东电气集团有限公司  </p>
                <p class="discharge-total">碳排放中和系数比：60%</p>
              </div>
              <div class="discharge-item">
                <p class="discharge-name">6. 四川华东电气集团有限公司  </p>
                <p class="discharge-total">碳排放中和系数比：60%</p>
              </div>
              <div class="discharge-item">
                <p class="discharge-name">7. 四川华东电气集团有限公司  </p>
                <p class="discharge-total">碳排放中和系数比：60%</p>
              </div>
              <div class="discharge-item">
                <p class="discharge-name">8. 四川华东电气集团有限公司  </p>
                <p class="discharge-total">碳排放中和系数比：60%</p>
              </div>
            </el-col>
          </el-row>

          <!--  <div v-for="(item,index) in dischargeList" :key="'discharge'+index" class="discharge-item">
                   <p class="discharge-name"> {{item.name}} </p>
                   <p class="discharge-total"> {{item.total}} </p>
           </div> -->
        </head-tab>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" justify="space-around" style="width:100%;min-heigh:373px;margin-left:10px;margin-top:15px;padding:0 20px;">
      <el-divider />
    </el-row>

    <el-row type="flex" justify="center">

      <el-col :span="12">
        <footer class="footer">

          <p class="concat-sever">服务机构</p>
          <div class="concat-list">
            <img src="@/assets/index/u585.png" alt="">
            <img src="@/assets/index/u586.png" alt="">
          </div>

          <p class="concat-sever">四川省循环经济协会</p>
          <p class="concat-phone">联系电话028-85564848</p>
        </footer>
      </el-col>
    </el-row>

  </div>
</template>
<script>

import ringChart from '@/views/charts/ringChart'
import transverse from '@/views/charts/Transverse'

export default {
  components: {
    ringChart,
    transverse
  },
  data() {
    return {
      test: [],
      tranData: [],
      ringData: [],
      tableData1: [
        {
          name: '四川华东电气集团有限公司',
          value: '20吨',
          price: '5万',
          date: '2021-11-29'
        },
        {
          name: '阿里巴巴集团控股有限公司',
          value: '20吨',
          price: '5万',
          date: '2021-11-29'
        },
        {
          name: '深圳市腾讯计算机有限公司',
          value: '20吨',
          price: '5万',
          date: '2021-11-29'
        },
        {
          name: '四川菲迪克有限公司',
          value: '20吨',
          price: '5万',
          date: '2021-11-29'
        },
        {
          name: '鸿福锦精密工业（深圳）有限公司',
          value: '20吨',
          price: '5万',
          date: '2021-11-29'
        }
      ],
      levelFun: [
        {
          id: 1,
          title: '平台共计注册企业总数量',
          totle: '535215'
        },
        {
          id: 3,
          title: '平台共计会员企业总数量',
          totle: '436743'
        }
      ],
      notice: [
        '关于碳量交易流程的讲解',
        '关于注册登记流程的讲解',
        '关于登记碳排放总量和碳中和总量流程的讲解',
        '关于碳量交易流程的讲解'
      ],
      promulgate: [
        '第一批碳中和重要通知',
        '第一批碳中和重要通知',
        '第一批碳中和重要通知',
        '第一批碳中和重要通知'
      ],
      dischargeList: [
        { name: '四川华东电气集团有限公司', total: '60%' },
        { name: '四川华东电气集团有限公司', total: '60%' },
        { name: '四川华东电气集团有限公司', total: '60%' },
        { name: '四川华东电气集团有限公司', total: '60%' },
        { name: '四川华东电气集团有限公司', total: '60%' },
        { name: '四川华东电气集团有限公司', total: '60%' },
        { name: '四川华东电气集团有限公司', total: '60%' }
      ],
      indexTag: 1,
      scrollObj: {
        pannel1: {
          timer: null,
          top: 0,
          divBox: null,
          len: 0
        },
        pannel2: {
          timer: null,
          top: 0,
          divBox: null,
          len: 0
        }
      }
    }
  },

  mounted() {
    this.ringData = [
      { value: 3121, name: '碳中和' },
      { value: 12000, name: '碳排放' }
    ]

    this.scrollPannel()

    this.tranData = [
      { value: 990, name: '碳中和总量' },
      { value: 2300, name: '碳需求总量' }
    ]
  },
  methods: {
    move(pannel) {
      pannel.timer = setInterval(() => {
        pannel.top -= 4
        if (pannel.top <= -(pannel.len * 50)) {
          pannel.top = 0
        }
        pannel.divBox.style.top = pannel.top + 'px'
      }, 200)
    },
    scrollPannel() {
      this.scrollObj.pannel1.divBox = document.getElementById('pannel1')
      this.scrollObj.pannel2.divBox = document.getElementById('pannel2')
      const _this = this
      if (this.scrollObj.pannel1.divBox) {
        this.scrollObj.pannel1.divBox.innerHTML += this.scrollObj.pannel1.divBox.innerHTML
        this.scrollObj.pannel1.len = this.tableData1.length
        this.move(this.scrollObj.pannel1)
        this.scrollObj.pannel1.divBox.onmouseenter = function() {
          console.log('--------------------停止', _this.scrollObj.pannel1.timer)
          if (_this.scrollObj.pannel1.timer) {
            console.log('--------------------停止12-----------')
            clearInterval(_this.scrollObj.pannel1.timer)
            _this.scrollObj.pannel1.timer = null
          }
        }
        this.scrollObj.pannel1.divBox.onmouseleave = function() {
          console.log('--------------------kaishi')
          _this.move(_this.scrollObj.pannel1)
        }
      }

      if (this.scrollObj.pannel2.divBox) {
        this.scrollObj.pannel2.divBox.innerHTML += this.scrollObj.pannel2.divBox.innerHTML

        this.scrollObj.pannel2.len = this.tableData1.length

        this.move(this.scrollObj.pannel2)

        this.scrollObj.pannel2.divBox.onmouseenter = function() {
          console.log('--------------------停止')
          // clearInterval(_this.scrollObj.pannel1.timer);
          // timer = null
          if (_this.scrollObj.pannel2.timer) {
            console.log('--------------------停止12-----------')
            clearInterval(_this.scrollObj.pannel2.timer)
            _this.scrollObj.pannel2.timer = null
          }
        }
        this.scrollObj.pannel2.divBox.onmouseleave = function() {
          console.log('--------------------kaishi')
          _this.move(_this.scrollObj.pannel2)
        }
      }
    },
    goToDataset() {
      this.$router.push({ name: 'Dataset', params: {}})
    },
    moreTip(msg) {
      this.$message.info('msg:' + msg)
    }
  }
}
</script>

<style <style lang="scss" scoped>
  @import "~@/styles/mixin.scss";
  .content {
    .timer-box {
      position: relative;
      .timer-head {
        height: 50px;
        line-height: 50px;
        div {
          display: inline-block;
          border-right: 1px solid #ccc !important;
          border-bottom: 1px solid #ccc !important;
          text-align: center;
          font-weight: bold;
        }
        &.tb{
          border-top: 1px solid #ccc !important;
        }
      }
      .tc {
        position: relative;
        height: 200px;
        width: 100%;
        margin: 38px 0 60px 0;
        overflow: hidden;
        .timer-content {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          .timer-item {
            position: relative;
            width: 100%;
            height: 50px;
            line-height: 50px;
            .info {
              float: left;
              text-align: center;
              font-weight: bold;
              // display: inline-block;
            }
          }
        }
      }
    }
    table[class="table-d"] {
      position: relative;
      border-right: 1px solid #ccc !important;
      /*  border-bottom: 1px solid #ccc !important; */
    }
    table[class="table-c"] {
      position: relative;
      border-right: 1px solid #ccc !important;
      border-top: 1px solid #ccc !important;
      margin-top: 28px;
    }
    table[class="table-c"] th,
    table[class="table-d"] th {
      border-left: 1px solid #ccc !important;
      border-bottom: 1px solid #ccc !important;
    }
    table[class="table-c"] tr[class="emptClass"],
    table[class="table-d"] tr[class="emptClass"] {
      height: 20px;
      line-height: 20px;
    }
    table[class="table-c"] tr,
    table[class="table-d"] tr {
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
    /* table[class="table-d"] tr:nth-child(2),
  table[class="table-c"] tr:nth-child(2){
    margin-top: 50px;
  } */
    width: 100%;
    max-height: calc(100vh - 160px);
    overflow: scroll;
    .hValue {
      width: 100%;
      height: 319px;
    }
    .cursorName {
      cursor: pointer;
    }
    .level-item {
      @include clearfix;
      padding-top: 20px;
      font-size: 20px;
      font-weight: bold;
      position: relative;
      .level-title {
        float: left;
        margin-left: 25px;
      }
      .level-total {
        float: right;
        margin-right: 25px;
      }
    }
    .notice-item {
      padding: 22px 10px;
      font-size: 18px;
      overflow: hidden;
    }
    .promulgate-item:before,
    .notice-item:before {
      content: "•";
      color: "red";
    }
    .promulgate-item {
      padding: 10px 10px;
      font-size: 18px;
      overflow: hidden;
    }
    .discharge-item {
      font-size: 18px;
      font-weight: bold;
      @include clearfix;
      padding-top: 20px;
      position: relative;
      line-height: 50px;
      .discharge-name {
        float: left;
        margin-left: 25px;
      }
      .discharge-total {
        float: right;
        margin-right: 200px;
      }
    }
    // 诚信信息
    .cx-title {
      height: 106px;
      width: 100%;
      line-height: 106px;
      background-image: inherit;
      background-position: inherit;
      background-size: inherit;
      background-repeat: inherit;
      background-attachment: inherit;
      background-origin: inherit;
      background-clip: inherit;
      background-color: rgb(228, 228, 228);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgb(121, 121, 121);
      border-radius: 0px;
      box-shadow: none;
      font-size: 16px;
      color: rgb(0, 0, 0);
      text-align: center;
      &:hover {
        cursor: pointer;
        background-color: #fff;
      }
    }
    .cx-content {
      height: 63.5px;
      width: 100%;
      line-height: 63.5px;
      padding: 0 10px;
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgb(121, 121, 121);
    }
    .el-divider {
      background-color: #000;
    }
    .footer {
      padding: 20px 0;
      .concat-sever {
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
      }
      img {
        margin: 0;
        padding: 0;
      }
      .concat-list {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        // text-align: center;
      }
      .concat-phone {
        width: 100%;
        text-align: center;
        font-weight: 100;
        font-size: 16px;
      }
    }
  }
  .tranBox{
    position: relative;
    font-size: 13px;
    font-weight: bold;
    .tranBox-p1{
      position: absolute;
      bottom: 45px;
      width: 110px;
      z-index: 1000;
    };
    .tranBox-p2{
      position: absolute;
      left: 235px;
      bottom: 45px;
      width: 114px;
      z-index: 1000;
    }
  }
</style>

